<!--
 作者 : 唐梓元
 日期 : 2019-6-26
 版本 : 1.0
 描述 :头部导航
 使用 : <detail-title :mobanList="mobanList"></detail-title>
 参数 :mobanList是父组件传过来的参数控制元素显示与隐藏
 -->
<template>
  <div class="titleWrapper ">
    <div class="titleWrapper-padding20 f">
      <div class="flex250"> <span :class="`iconfont icon-${mobanList.iconLeft} iconL`" ></span><span v-text="mobanList.titleLeft"></span><span v-if="mobanList.contentNum!=null" v-text="`（${mobanList.contentNum}）`"></span></div>
      <div class="flex1" ><div v-if="mobanList.titleMidl">标题：<span class="colorBlue" v-text="mobanList.titleMidl"></span ></div> </div>
      <div class="flex250 flex itemCenter">
        <button class="btn" v-if="mobanList.btn" v-text="mobanList.btn" @click="do_goDetail(goWhere)"></button>
        <div class="xiazai-text" :class="mobanList.color?'blue':''" v-if="mobanList.iconDown" @click="do_goDetail(mobanList.iconText)"> <span :class="`iconfont icon-${mobanList.iconDown}`"></span>{{mobanList.iconText}} </div>
        <div class="goDetail" v-if="mobanList.goNext" @click="do_goDetail(goWhere)">进去详情&nbsp <span :class="`goDetail iconfont icon-${mobanList.iconRight}`"></span></div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "cm_detail-title",
      props:{
        mobanList:Object,
        goWhere:String
      },
      methods:{
        do_goDetail(item){
          if(item=="下载"){
            alert("下载")
          }else {
            this.$emit("do_showDetail",item)
          }

        }
      }
    }
</script>

<style scoped>
  @import "../../common/icon/iconfont.css";
  .titleWrapper{
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    border-bottom: 1px solid gainsboro;
    align-items: center;
  }
  .titleWrapper-padding20{
    padding: 0 10px 0 20px;
    box-sizing: border-box;
  }
  .flex250{
    flex: 0 0 250px;
  }
  .iconfont{
    color: #468FFE;
    margin-right: 10px;
    font-size: 18px;

  }
  .colorBlue{
    color: #468FFE;
  }
  .titleWrapper .btn{
    background-color: #EF9D5A;
    color: white;
    height: 28px;
    padding: 0 8px;
  }
  .icon-xiazai{
    color:#EF9D5A ;
    margin-right: 5px;
    font-weight: 600;
  }
  .xiazai-text{
    color:#EF9D5A ;
  }
  .blue,.blue .iconfont{
    color:#468FFE !important; ;
  }

  .itemCenter{
    text-align: right;
  }
  .itemCenter *{
    cursor: pointer;
    margin-left: auto;
  }
  .goDetail{
    color: #9F9F9F;
  }
  .icon-wenjian{
    font-size: 24px;
    margin-right: 6px;
    margin-left: -4px;
  }
  .icon-xinxi,.icon-yingyong{
    font-size: 26px;
    margin-right: 6px;
    margin-left: -4px;
    position: relative;
    top: 4px;
  }
  .icon-yingyong{
    font-size: 22px;
  }
  .icon-pin2biezhen{
    font-size: 20px;
    margin-right: 6px;
    margin-left: -4px;
  }
</style>
